<template>
	<div class="newEnjoy-20180410 mescroll" id="mescroll" v-bind:class="[modalFlag == 'true' ? overflow : '']">
		<header class="head">
			<img src="~@/assets/imgs/20180410/header.png" />
		</header>
		<div class="main" :style="{backgroundImage: 'url(' + mainBg + ')'}">
			<div class="mainDiv">
				<p class="title">新注册用户（400元劵）</p>
				<div class="allCouponDiv flex flex-item-center">
					<div class="allCoupon">
						<div v-for="(item,index) in firstCoupon" class="coupon flex" :style="{backgroundImage: 'url(' + item.img + ')'}">
							<div class="couponTitleDiv flex flex-item-center">
								<div class="couponTitle">{{item.couponTitle}}</div>
							</div>
							<div class="couponRight">
								<p class="num">{{item.num}}</p>
								<div class="couponDetail">{{item.couponDetail}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="btn-position"><button class="activeBtn" ref="getBtnForNew" @click="getTicketForNew">一键领取</button></div>
			<div class="mainDiv">
				<p class="title">新开通会员（600元劵）</p>
				<div class="allCouponDiv flex flex-item-center">
					<div class="allCoupon">
						<div v-for="(item,index) in secondCoupon" class="coupon flex" :style="{backgroundImage: 'url(' + item.img + ')'}">
							<div class="couponTitleDiv flex flex-item-center">
								<div class="couponTitle">{{item.couponTitle}}</div>
							</div>
							<div class="couponRight">
								<p class="num">{{item.num}}</p>
								<div class="couponDetail">{{item.couponDetail}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="second-btn-position"><button class="activeBtn" ref="getBtn" @click="getTicket">一键领取</button></div>
		</div>

		<activeModal v-if='modalFlag' v-on:cancel='cancelClick' v-on:sure='sureClick'>
			<p slot='title' class="modalTitle">抱歉！您还不是花卡会员</p>
			<p slot='info' class="modalInfo">暂时还未获得领取优惠券资格</p>
		</activeModal>
	</div>
</template>
<script>
	import http from '@/util/http'
	import Api from '@/util/api'
	import Utils from '@/util/util';
	import MeScroll from 'mescroll';
	import GoHome from '@/components/goHome';
	//	import "mescroll/src/mescroll.min.css";
	import activeModal from '@/components/activeComponents/activeModal';

	export default {
		name: 'activity20180410',
		components: {
			'go-home': GoHome,
			activeModal: activeModal,
		},
		data() {
			let self = this;
			return {
				modalFlag: false,
				token: '',
				mescroll: null,
				pdlist: [],
				groupId: 1,
				groupIds: [1, 2, 3, 4, 5, 6],
				curIndex: 1,
				curScrollLeft: 0,
				oldUser: false,
				animateRight: null,
				animateLeft: null,
				timer: null,
				num: 1,
				size: 10,
				flag: false,
//				activeId: 97, // 正式id
//				vipActiveId: 98,
				activeId: 219, // 测试id
				vipActiveId: 218,
				isVip: false,
				isNew: false,
				mainBg: require('../../../assets/imgs/20180410/mainBg.png'),
				firstCoupon: [{
					couponTitle: '全品类',
					num: '10',
					couponDetail: '满99减10',
					img: require('../../../assets/imgs/20180410/couponBg.png'),
				}, {
					couponTitle: '全品类',
					num: '20',
					couponDetail: '满199减20',
					img: require('../../../assets/imgs/20180410/couponBg.png'),
				}, {
					couponTitle: '全品类',
					num: '70',
					couponDetail: '满899减70',
					img: require('../../../assets/imgs/20180410/couponBg.png'),
				}, {
					couponTitle: '美妆',
					num: '100',
					couponDetail: '满1000减100',
					img: require('../../../assets/imgs/20180410/mainBig.png'),
				}, {
					couponTitle: '数码',
					num: '200',
					couponDetail: '满4000减200',
					img: require('../../../assets/imgs/20180410/mainBig.png'),
				}],
				secondCoupon: [{
					couponTitle: '全品类',
					num: '20',
					couponDetail: '满99减20',
					img: require('../../../assets/imgs/20180410/couponBg.png'),
				}, {
					couponTitle: '全品类',
					num: '30',
					couponDetail: '满199减30',
					img: require('../../../assets/imgs/20180410/couponBg.png'),
				}, {
					couponTitle: '全品类',
					num: '50',
					couponDetail: '满499减50',
					img: require('../../../assets/imgs/20180410/couponBg.png'),
				}, {
					couponTitle: '全品类',
					num: '100',
					couponDetail: '满1999减100',
					img: require('../../../assets/imgs/20180410/mainBig.png'),
				}, {
					couponTitle: '美妆',
					num: '100',
					couponDetail: '满1000减100',
					img: require('../../../assets/imgs/20180410/mainBig.png'),
				}, {
					couponTitle: '数码',
					num: '300',
					couponDetail: '满6000减300',
					img: require('../../../assets/imgs/20180410/mainBig.png'),
				}, ]
			}
		},
		created() {
			this.token = Utils.getUserToken() || this.token;
			let self = this;
			window.loginCallBack = (token) => {
				self.token = token;
				token && self.isGetTicket();
				token && self.isGetTicketForNew();
			}
		},
		mounted() {
			var self = this;
			self.isGetTicket();
			self.isGetTicketForNew();
		},
		methods: {
			isGetTicketForNew(fromBtn, callback) {
				let token = Utils.getUserToken() || this.token,
					self = this;
				if(token && token != 'null') {
					const res = this.post(Api.validateNewUserByActivity, {
						activeId: self.activeId
					}, {
						token: this.token
					});
					res.then(res => {
						console.log(!fromBtn)
						//初次加载时判断是否领取
						if(res.data && res.data.validateGrabedCoupon && !fromBtn) {
							this.$refs.getBtnForNew.innerText = '已领取';
							this.$refs.getBtnForNew.disabled = true;
							return;
						}

						//初次加载时判断
						if(res.data && res.data.validateOldUser && !fromBtn) {
							this.$refs.getBtnForNew.disabled = true;
							return;
						}

						//如果是来自按钮触发
						if(res.data && res.data.validateOldUser && fromBtn) {
							this.$vux.toast.show({
								type: 'text',
								text: '此活动仅限花伴商城新人参加，花伴为您准备了更多好礼',
								time: 3000,
								position: 'middle'
							});
							self.oldUser = true;
							setTimeout(() => {
								Utils.goHome();
							}, 2400)
						} else {
							self.oldUser = false;
							callback && callback();
						}
					})
				}
			},
			isGetTicket(fromBtn, callback) {
					let self = this;
					let token = this.token;
				if(token && token != 'null') {
					const res = this.post(Api.validateVipUser, {
						activeId: self.vipActiveId
					}, {
						token: this.token
					});
					res.then(res => {
						//初次加载时判断是否领取
						if(res.data && res.data.validateVipGrabedCoupon && !fromBtn) {
							this.$refs.getBtn.innerText = '已领取';
							this.$refs.getBtn.disabled = true;
							return;
						}

						//如果是来自按钮触发
						if(res.data && res.data.validateOldUser && fromBtn) {
							this.$vux.toast.show({
								type: 'text',
								text: '此活动仅限花伴商城新人参加，花伴为您准备了更多好礼',
								time: 3000,
								position: 'middle'
							});
							self.oldUser = true;
							setTimeout(() => {
								Utils.goHome();
							}, 2400)
						} else {
							self.oldUser = false;
							callback && callback();
						}
					})
				}
			},
			getTicketForNew() {
				let dom = this.$refs.getBtnForNew,
					self = this;

				this.isGetTicketForNew(true, () => {
					dom.setAttribute('disabled', 'disabled');
					this.$vux.loading.show();
					const res = this.post(Api.couponGrabCoupons, {
						activeId: self.activeId
					}, {
						token: this.token
					});
					res.then(data => {
						if(data.code == '200') {
							dom.innerText = '已领取';
							this.$vux.toast.text('领券成功!', 'middle');
						} else {
							if(data.message == "非常抱歉，您已经在该活动中领取了优惠券，不能重复领取！") {
								dom.innerText = '已领取';
							} else {
								dom.removeAttribute('disabled');
							}
							if(data.code !== 1011) {
								this.$vux.toast.text(data.message, 'middle');
							}
						}
						this.$vux.loading.hide();
						//						dom.style.cssText = 'opacity: .3';

					}).catch(function(error) { //加上catch
						console.log(error);
					})
				});
			},
			getTicket() {
				let dom = this.$refs.getBtn,
					self = this;

				this.isGetTicket(true, () => {
					dom.setAttribute('disabled', 'disabled');
					this.$vux.loading.show();
					const res = this.post(Api.grabCouponsByVipActivity, {
						activeId: self.vipActiveId
					}, {
						token: this.token
					});
					res.then(data => {
						if(data.code == '200') {
							dom.innerText = '已领取';
							this.$vux.toast.text('领券成功!', 'middle');
						} else {
							if(data.message == "非常抱歉，您已经在该活动中领取了优惠券，不能重复领取！") {
								dom.innerText = '已领取';
							} else {
								dom.removeAttribute('disabled');
							}
							if(data.code !== 1011) {
								if(data.code == 400 && data.message == '你还不是会员') { // 如果不是会员执行的弹窗
									if(Utils.isNativeApp()) {
										if(Utils.isNewAppForNum()) { // 如果是新版的app
											self.modalFlag = true;
										} else {
											this.$vux.toast.text('抱歉，您暂未获得领取资格', 'middle');
										}
									} else if(Utils.isWxPlus()) {
										self.modalFlag = true;
									} else {
										this.$vux.toast.text('抱歉，您暂未获得领取资格', 'middle');
									}
								} else {
									this.$vux.toast.text(data.message, 'middle');
								}
							}
						}
						this.$vux.loading.hide();

					}).catch(function(error) { //加上catch
						console.log(error);
					})
				});
			},
			goVip() { // 跳转到开通花卡的界面
				if(Utils.isNativeApp()) {
					location.href = `huaban://openHuaka`;
				} else if(Utils.isWxPlus()) {
					if(JSON.stringify(this.$route.query) != '{}' && this.$route.query.jumpType == "TakeCard") {
						wx.miniProgram.navigateTo({
							url: "/pages/payvip/payvip"
						})
					} else {
						wx.miniProgram.switchTab({
							url: "/pages/vip/vip"
						})
					}

				} else {
					return true;
				}

			},
			cancelClick() {
				this.modalFlag = false;
			},
			sureClick() {
				this.goVip()
				this.modalFlag = false;
			}
		},
	}
</script>
<style lang='less' scoped="scoped">
	.overflow {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	
	.main {
		background-size: 100% 100%;
		height: 10.65rem;
		.title {
			height: 0.42rem;
			font-size: 0.3rem;
			color: rgba(70, 70, 70, 1);
			line-height: 0.42rem;
			text-align: center;
			padding: .5rem 0;
		}
		.allCouponDiv {
			height: 2.3rem;
			.allCoupon {
				width: 6.24rem;
				height: 2.34rem;
				display: flex;
				flex-wrap: wrap;
				.coupon {
					margin: .01rem;
					width: 2.06rem;
					height: 1.15rem;
					background-size: 100% 100%;
					.couponTitleDiv {
						width: .55rem;
						align-items: center;
						height: 1.15rem;
						.couponTitle {
							width: .28rem;
							font-size: .22rem;
							color: rgba(255, 255, 255, 1);
							line-height: .24rem;
						}
					}
					.couponRight {
						width: 1.48rem;
						height: 1.15rem;
						.num {
							margin: .19rem 0 0 .08rem;
							width: .67rem;
							height: .5rem;
							font-size: .48rem;
							color: rgba(255, 255, 255, 1);
							line-height: .5rem;
						}
						.couponDetail {
							height: .25rem;
							font-size: .2rem;
							color: rgba(255, 255, 255, 1);
							line-height: .25rem;
							margin: 0 0 0 .06rem;
						}
					}
				}
			}
		}
	}
	
	.activeBtn:disabled {
		background: #BCBCBC !important;
		color: white !important;
	}
	
	.btn-position {
		bottom: 5.6rem;
		margin: .5rem 0 .1rem 0;
		button.activeBtn {
			margin-left: .65rem;
			background: rgba(251, 194, 0, 1);
			border-radius: .4rem;
			width: 6.2rem;
			height: .8rem;
			border: none;
			padding: 0;
			font-size: .3rem;
			color: rgba(70, 70, 70, 1);
			outline: none;
			vertical-align: middle;
		}
	}
	
	.second-btn-position {
		bottom: .5rem;
		margin: .5rem 0 .1rem 0;
		button.activeBtn {
			margin-left: .65rem;
			background: rgba(251, 194, 0, 1);
			width: 6.2rem;
			height: .8rem;
			border-radius: .4rem;
			border: none;
			padding: 0;
			font-size: .3rem;
			color: rgba(70, 70, 70, 1);
			outline: none;
			vertical-align: middle;
		}
	}
	
	.newEnjoy-20180410 {
		background: #ffe462;
		-webkit-tap-highlight-color: transparent;
		.head {
			img {
				display: block;
				width: 100%;
			}
		}
	}
</style>